<!DOCTYPE html>
<html xmlns:th="Thymeleaf" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <th:block th:include="common/include :: header('编辑角色')" />
    <th:block th:include="common/include :: ztree-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-role-add">
        <input type="hidden" id="roleid" th:value="${role.id}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label ">角色名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="roleName" id="roleName" th:value="${role.roleremark}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">权限字符：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="roleKey" id="roleKey" th:value="${role.rolename}" required>
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限字符，如：@RequiresRoles("")</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">显示顺序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="roleSort" id="roleSort" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">状态：</label>
            <div class="col-sm-8">
                <label class="toggle-switch switch-solid">
                    <input type="checkbox" id="status" th:checked="${role.valid == 1 ? true : false}">
                    <span></span>
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <input id="remark" name="remark" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">菜单权限</label>
            <div class="col-sm-8">
                <!--                <div id="menuTrees" class="ztree"></div>-->
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </form>
</div>
<th:block th:include="common/include :: footer" />
<th:block th:include="common/include :: ztree-js" />
<script type="text/javascript">
    var zNodes =[
        {id:1, pId:0, name:"[core] 基本功能 演示", open:true,checked:true},
        {id:101, pId:1, name:"最简单的树 --  标准 JSON 数据",checked:true},
        {id:102, pId:1, name:"最简单的树 --  简单 JSON 数据"},
        {id:103, pId:1, name:"不显示 连接线"},
        {id:104, pId:1, name:"不显示 节点 图标"},
        {id:108, pId:1, name:"异步加载 节点数据"},
        {id:109, pId:1, name:"用 zTree 方法 异步加载 节点数据"},
        {id:110, pId:1, name:"用 zTree 方法 更新 节点数据"},
        {id:111, pId:1, name:"单击 节点 控制"},
        {id:112, pId:1, name:"展开 / 折叠 父节点 控制"},
        {id:113, pId:1, name:"根据 参数 查找 节点"},
        {id:114, pId:1, name:"其他 鼠标 事件监听"},

        {id:2, pId:0, name:"[excheck] 复/单选框功能 演示", open:false},
        {id:201, pId:2, name:"Checkbox 勾选操作"},
        {id:206, pId:2, name:"Checkbox nocheck 演示"},
        {id:207, pId:2, name:"Checkbox chkDisabled 演示"},
        {id:208, pId:2, name:"Checkbox halfCheck 演示"},
        {id:202, pId:2, name:"Checkbox 勾选统计"},
        {id:203, pId:2, name:"用 zTree 方法 勾选 Checkbox"},
        {id:204, pId:2, name:"Radio 勾选操作"},
        {id:209, pId:2, name:"Radio nocheck 演示"},
        {id:210, pId:2, name:"Radio chkDisabled 演示"},
        {id:211, pId:2, name:"Radio halfCheck 演示"},
        {id:205, pId:2, name:"用 zTree 方法 勾选 Radio"},

        {id:3, pId:0, name:"[exedit] 编辑功能 演示", open:false},
        {id:301, pId:3, name:"拖拽 节点 基本控制"},
        {id:302, pId:3, name:"拖拽 节点 高级控制"},
        {id:303, pId:3, name:"用 zTree 方法 移动 / 复制 节点"},
        {id:304, pId:3, name:"基本 增 / 删 / 改 节点"},
        {id:305, pId:3, name:"高级 增 / 删 / 改 节点"},
        {id:306, pId:3, name:"用 zTree 方法 增 / 删 / 改 节点"},
        {id:307, pId:3, name:"异步加载 & 编辑功能 共存"},
        {id:308, pId:3, name:"多棵树之间 的 数据交互"},

        {id:4, pId:0, name:"大数据量 演示", open:false},
        {id:401, pId:4, name:"一次性加载大数据量"},
        {id:402, pId:4, name:"分批异步加载大数据量"},
        {id:403, pId:4, name:"分批异步加载大数据量"},

        {id:5, pId:0, name:"组合功能 演示", open:false},
        {id:501, pId:5, name:"冻结根节点"},
        {id:502, pId:5, name:"单击展开/折叠节点"},
        {id:503, pId:5, name:"保持展开单一路径"},
        {id:504, pId:5, name:"添加 自定义控件"},
        {id:505, pId:5, name:"checkbox / radio 共存"},
        {id:506, pId:5, name:"左侧菜单"},
        {id:507, pId:5, name:"下拉菜单"},
        {id:509, pId:5, name:"带 checkbox 的多选下拉菜单"},
        {id:510, pId:5, name:"带 radio 的单选下拉菜单"},
        {id:508, pId:5, name:"右键菜单 的 实现"},
        {id:511, pId:5, name:"与其他 DOM 拖拽互动"},
        {id:512, pId:5, name:"异步加载模式下全部展开"},

        {id:601, pId:6, name:"隐藏普通节点"},
        {id:6, pId:0, name:"其他扩展功能 演示", open:false},
        {id:602, pId:6, name:"配合 checkbox 的隐藏"},
        {id:603, pId:6, name:"配合 radio 的隐藏"}
    ];

    var setting = {
        view: {
            // addHoverDom: addHoverDom,
            // removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }/*,
            edit: {
                enable: true
            }*/
    };
    $(function() {
        $.ajax({
            url:ctx+"menuAction/menuTreeList/"+$("#roleid").val(),
            type:'get',
            success:function (res) {
                $.fn.zTree.init($("#treeDemo"), setting, res);
            }
        })
    });
    /*
        $("#form-role-add").validate({
            rules:{
                onkeyup: false,
                roleName:{
                    remote: {
                        url: ctx + "system/role/checkRoleNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "roleName" : function() {
                                return $.common.trim($("#roleName").val());
                            }
                        },
                        dataFilter: function(data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
                roleKey:{
                    remote: {
                        url: ctx + "system/role/checkRoleKeyUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "roleKey" : function() {
                                return $.common.trim($("#roleKey").val());
                            }
                        },
                        dataFilter: function(data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
                roleSort:{
                    digits:true
                },
            },
            messages: {
                "roleName": {
                    remote: "角色名称已经存在"
                },
                "roleKey": {
                    remote: "角色权限已经存在"
                }
            },
            focusCleanup: true
        });*/

    function submitHandler(callback) {
        add(callback);
    }

    function add(callback) {
        var roleid = $("#roleid").val();
        var roleName = $("input[name='roleName']").val();
        var roleKey = $("input[name='roleKey']").val();
        var roleSort = $("input[name='roleSort']").val();
        debugger;
        var status = $("input[id='status']").is(':checked') == true ? 1 : 0;
        var remark = $("input[name='remark']").val();
        var zTreeOjb = $.fn.zTree.getZTreeObj("treeDemo");  //ztree的Id  zTreeId

        var menuIds = zTreeOjb.getCheckedNodes();
        var menuidarray ="" ;
        for (var i = 0; i < menuIds.length; i++) {
            if(i == menuIds.length-1){
                menuidarray +=menuIds[i].id;
            }else{
                menuidarray +=menuIds[i].id+',';
            }
        }
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "roleAction/roleEdit",
            data : {
                "id":roleid,
                "roleremark": roleName,
                "rolename": roleKey,
                // "roleSort": roleSort,
                "valid": status,
                // "remark": remark,
                "menus": menuidarray
            },
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.modal.close(data);
                if (typeof callback == "function") {
                    callback(data);
                }
            }
        });
    }
</script>
</body>
</html>

